<template>
	<view class="page-container bg-grey">
		<up-navbar
			safeAreaInsetTop
			fixed
			placeholder
			:bgColor="activeId == '1' ? '#fff' : 'transparent'"
			:autoBack="true"
		>
			<template #center>
				<view :class="{ collection: activeId == '2' }">
					<zjy-navbar-tabs :tabs="tabs" @tabClick="handleTabChange" :activeId="activeId" />
				</view>
			</template>
		</up-navbar>
		<product-list v-if="activeId == '1'" type="promotion" />
		<product-collection v-if="activeId == '2'" />
	</view>
</template>

<script setup lang="ts">
import productList from "./components/product-list.vue"
import productCollection from "./components/product-collection.vue"

const activeId = ref("1")
const tabs = ref([
	{
		name: "单品",
		id: "1",
	},
	{
		name: "合集",
		id: "2",
	},
])

const handleTabChange = (type: string) => {
	activeId.value = type
}
</script>
<style lang="scss" scoped>
.collection {
	::v-deep .navbar-tabs {
		background: rgba(0, 0, 0, 0.12) !important;
		color: $c-white !important;
	}
}
</style>
